<!-- 输入跳转链接: <me-input-url v-model="comp.url" :switch-tab.sync="comp.switchTab"></me-input-url> -->
<template>
	<view class="me-input-url">
		<view class="label">{{label || '跳转链接'}}: </view>
		<input :value="value" class="input item-flex" :class="{'active': switchTab}" placeholder="支持 '/pages/xx' 或 'http://xxx' 格式的链接" @input="setValue"/>
		<view class="switch-tab" :class="{'active': switchTab}" @click="setSwitchTab"> <view class="icon-select" :class="{'uni-icons-checkbox': switchTab, 'uni-icons-circle': !switchTab}"></view> uni.switchTab方式 </view>
	</view>
</template>

<script>
	export default {
		props:{
			label: String, // 备注
			value: String, // 链接
			switchTab: Boolean, // 是否uni.switchTab方式打开
		},
		methods: {
			setValue(e){
				this.$emit('input', e.detail.value.trim())
			},
			setSwitchTab(){
				this.$emit('update:switchTab', !this.switchTab)
			}
		}
	}
</script>

<style lang="scss">
	.me-input-url{
		position: relative;
		margin-bottom: 24px;
		display: flex;
		align-items: center;
		.label{
			margin-right: 10px;
		}
		.item-flex{
			flex: 1;
		}
		.input{
			height: 50px;
			padding-left: 10px;
			border: 1px solid #eee;
			&.active{
				border-color: $uni-color-primary;
			}
		}
		.switch-tab{
			z-index: 9;
			position: absolute;
			bottom: -18px;
			right: 0;
			height: 18px;
			line-height: 18px;
			color: #999;
			font-size: 12px;
			cursor: pointer;
			background-color: #eee;
			padding: 0 10px;
			border-radius: 0 0 0 10px;
			.icon-select{
				margin-right: 4px;
			}
			&.active{
				background-color: $uni-color-primary;
				color: #fff;
			}
		}
	}
</style>